<template>
  <div class="app-container">
    <div class="content-content">
      <navbar />
      <h1 class="title">App列表</h1>
      <div class="appTable">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                @click="handleApp(scope.$index, scope.row)"
                >管理资源和权限</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changePage"
          style="margin-top: 15px; text-align: right"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
export default {
  name: "home",
  components: {
    navbar,
  },
  data() {
    return {
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  methods: {
    handleApp(index, row) {
      this.$router.push({
        path: "/resources/index",
        query: {
          row: row,
        },
      });
    },
    changePage(num) {
      this.page = num;
      // this.tablelist();
    },
  },
};
</script>

<style lang="scss" scoped>
h1{
  text-align: center;
}
.content-content {
  background: #fff;
  padding: 15px;
  position: relative;
}
/deep/ .el-table .cell {
  text-align: center;
}
</style>